<template>
   <div >
     <p> 商品清单如下 </p>
     <div  v-for="(obj,index) in shopData" :key="index">
       {{ obj.shopName }} -- {{ obj.price }} 元/份
     </div>
     <br>
            <!-- 1创建模板遍历并绑定数据 -->
       <aaa
       v-for="(obj,index) in shopData"
       :key="index"
      :goodsname = "obj.shopName"
      :ind = "index"
      :count = "obj.count"
      @jiaa = "jiaaa"
      @jiann = "jiannn"         >
       </aaa>
     <p>请选择购物数量:</p>
     <p>总价为:{{shopAll}}</p>

   </div>
</template>

<script>
import aaa from "./components/买点好吃的"
export default {
  data() {
       return {
        shopData: [
    {
        "shopName": "可比克薯片",
        "price": 5.5,
        "count": 0
    },
    {
        "shopName": "草莓酱",
        "price": 3.5,
        "count": 0
    },
    {
        "shopName": "红烧肉",
        "price": 55,
        "count": 0
    },
    {
        "shopName": "方便面",
        "price": 12,
        "count": 0
    }
]
       };
   },
//方法
methods: {
  jiaaa(ind){
    this.shopData[ind].count++
  },
  jiannn(ind){
     this.shopData[ind].count > 0 && this.shopData[ind].count--
  }
},
//过滤器
filters: {},
// 计算属性
computed: {
  shopAll(){
    return this.shopData.reduce((sum, obj) => sum += obj.count *obj.price,0)
  }
},
// 侦听器
watch: {},
// 组件名
components:{
  aaa
},
}
</script>

<style scoped>
</style>
